<template>
  <div class="task">
    <div class="taskTop">
      <div class="title">行为决策实验平台</div>
      <div class="phase">
        <el-row style="height: 100%">
          <el-col :span="4"></el-col>
          <el-col
              :span="16"
              style="display: flex; align-items: center; height: 100%">
            <span style="margin-right: 50px">第3场</span>
            <span style="margin-right: 50px" >实验阶段：第1阶段</span>
            <span>实验桌号： {{ $store.state.seatID }}号</span>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </div>
    </div>
    <div class="taskMain">
      <el-row style="height: 100%">
        <el-col :span="4" style="height: 100%"></el-col>
        <el-col :span="16" style="height: 100%">
          <div class="mainTask">
            <el-row style="height: 100%">
              <el-col
                  :span="8"
                  style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  font-size: 20px;
                  color: #3360ec;
                  font-weight: 600;">投资任务进度：{{$store.state.currentRound}}/12</el-col>
              <el-col :span="8"
              ><div class="grid-content ep-bg-purple-light"
              /></el-col>
              <el-col
                  :span="8" style="display: flex;align-items: center;height: 100%;justify-content: flex-end;font-size: 20px;">当前实验周期剩余时间：
                <span style="font-size: 28px; font-weight: 600; color: #3360ec"><a-countdown :value="$store.state.rest_Time" /></span>
              </el-col>
            </el-row>
          </div>
          <div class="mainCard">
            <el-row :gutter="12" style="height: 100%">
              <el-col :span="8">
                <el-card
                    shadow="always" style="height: 70%; border-radius: 10px; width: 85%">
                  <div
                      class="postNum"
                      style="  display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 600;
                      font-size: 19px;">
                    <el-icon color="#165dff" :size="27" ><TrendCharts /></el-icon>
                    基金 Ⅰ
                  </div>
                  <div class="postName" style="padding-top: 13px;font-size: 15px">拟任基金经理LJW</div>
                </el-card>
              </el-col>

              <el-col :span="8">
                <el-card
                    shadow="always" style="height: 70%; width: 85%; border-radius: 10px">
                  <div
                      class="postNum" style=" display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 600;
                      font-size: 19px;">
                    <el-icon color="#73d13d" :size="27" ><TrendCharts /></el-icon>
                    基金 Ⅱ
                  </div>
                  <div class="postName" style="padding-top: 13px;font-size: 15px">拟任基金经理LJW</div>
                </el-card> </el-col>
              <el-col :span="8">
              <el-card
                  shadow="always" style="height: 70%; border-radius: 10px; width: 85%">
                <div class="postNum" style=" display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 600;
                      font-size: 19px;">
                  <el-icon color="#ffc53d " :size="27"><TrendCharts /></el-icon>
                  基金 Ⅲ
                </div>
                <div class="postName" style="padding-top: 13px;font-size: 15px">拟任基金经理LJW</div>
              </el-card>
            </el-col>
            </el-row>

          </div>
          <div class="mainWord">
            <p style="font-size: 20px; padding: 30px; margin: 0">
              您当前的个人资产组合市值为: {{ this.$store.state.userAssets }}点
              <icon-trophy  :style="{fontSize:'29px'}" />
            </p>
            <a-space size="large">
              <a-statistic title="本轮收益" :value="$store.state.currentProfit" animation-duration="500" show-group-separator :value-style="{ color: '#cf1322' }"  animation  :precision="2"  >
<!--                <template #suffix>-->
<!--                  <icon-arrow-rise />-->
<!--                </template>-->
              </a-statistic>

              <div style="height: 100px;width: 50px">
              </div>

              <a-statistic extra="当前累计收益" :value="totalProfit"  animation-duration="500" :value-style="{ color: '#0fbf60' }" animation :precision="2" >
<!--                <template #suffix>%</template>-->
              </a-statistic>
            </a-space>
          </div>
          <div class="mainBtn">
            <el-button @click="yesBtn" type="primary">确认</el-button>
          </div>
        </el-col>
        <el-col :span="4" style="height: 100%"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import CProgress from './../components/c-progress'
import { ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import { TrendCharts} from "@element-plus/icons";
import { Icon } from '@arco-design/web-vue';
import {getAssets} from '@/api/index'
const IconFont = Icon.addFromIconFontCn({ src: 'https://at.alicdn.com/t/font_180975_ue66sq60vyd.js' });
export default {

  setup() {
    const now = Date.now();
    const start = ref(false);
    const handleFinish = () => {
      Message.info('Finish');
    };
    return {
      now,
      start,
      handleFinish,

    };
  },
  name: 'ShowIncome',
  components: {
    // eslint-disable-next-line
    CProgress,
    TrendCharts,
    IconFont
  },

  data() {
    return {
      totalProfit:0, //当前累计收益
      currentProfit:0, //本轮收益
      userAssets:0,
    }
  },

  mounted() {
    this.totalProfit = this.$store.state.totalProfit
    this.currentProfit = this.$store.state.currentProfit

    const seatID = this.$store.state.seatID

    getAssets({seatID}).then(res=>{

      this.$store.state.userAssets = Math.floor(res.userAssets * 100) / 100
      this.userAssets =  this.$store.state.userAssets
    console.log(res)

    })
    // description({seatID}).then(res=>{
    //
    //   console.log(res)
    //
    // })
  },
  watch: {

  },

  methods: {
    yesBtn() {
      this.$router.push({ name: 'IsShowMarket' })
    },
  }
}
</script>
<style lang="scss" scoped>
.task {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  .taskTop {
    width: 100%;
    height: 15%;

    .title {
      width: 100%;
      height: 60%;
      font-size: 58px;
      letter-spacing: 10px;
      font-weight: 700;
      color: aliceblue;
      background-color: #0b45b0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .phase {
      width: 100%;
      height: 40%;
      border: 1px solid rgb(185, 185, 185);
    }
  }
  .taskMain {
    width: 100%;
    height: 85%;
    .mainTask {
      width: 100%;
      height: 8%;
    }
    .mainCard {
      width: 100%;
      height: 20%;
      .row {
        .el-col {
          .el-col-8 {
            .is-guttered {
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
    .mainWord {
      text-align: center;
      justify-content: center;
      width: 100%;
      height: 10%;
    }
    .mainSlider {
      width: 100%;
      height: 50%;
      .jj1 {
        width: 100%;
        height: 33.33%;
        display: flex;
        align-items: center;
        .slider1 {
          width: 80%;
          border: 1px solid rgb(182, 176, 176);
          padding: 20px 20px;
        }
      }
    }
    .mainBtn {
      width: 100%;
      height: 12%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 170px;
      .el-button {
        width: 20%;
        height: 44%;
        background-color: #0b5aff;
      }
    }
  }
}
</style>